import { useEffect, useState } from 'react';
import { useLocation, Outlet, Link } from 'react-router-dom';
import useFriendStatus from '../hooks/useFriendStatus';
const About = () => {
    // 使用userLocation 获取当前页面的路径
    const location = useLocation();
    const { from, pathname } = location;
    return (
        <div>
            这里是大伟聊前端的主页 当前在{pathname}, 从{from} 跳转过来的
            <hr />
            <Test />
        </div>
    );
};
function Test() {
    const [count, setCount] = useState(1);
    const [fruit, setFruit] = useState('banana');
    const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

    // 相当于componentDidMount 和 componentDipUpdate
    // useEffect  // 告诉React 在完成对 DOM 的更改后运行你的“副作用”函数。
    // 由于副作用函数是在组件内声明的，所以它们可以访问到组件的 props 和 state
    // 默认情况下，React 会在每次渲染后调用副作用函数 —— 包括第一次渲染的时候
    useEffect(() => {
        document.title = `${count} times You clicked `;
    });
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
            <div className="content">
                <div className="header">
                    this is header
                    <div>
                        <Link to="/about/child1">child1</Link>
                        <Link to="/about/child2">child2</Link>
                    </div>
                </div>
                <Outlet />
            </div>
        </div>
    );
}

export default About;
let ChatApi = {};
function FriendStatusWithCounter(props) {
    // const [count, setCount] = useState(0);
    const isOnline = useFriendStatus(props.friend.id);

    // function handleStatusChange(status) {
    //     setIsOnline(status);
    // }
    // useEffect(() => {
    //     document.title = `You clicked ${count} times`;
    // });
    // useEffect(() => {
    //     ChatApi.sub(props.id, handleStatusChange);
    //     // React 会在组件销毁时取消对 ChatAPI 的订阅，然后在后续渲染时重新执行副作用函数。
    //     return () => {
    //         ChatApi.unsub(props.id, handleStatusChange);
    //     };
    // });

    if (isOnline === null) {
        return 'Loading....';
    }
    return isOnline ? 'Online' : 'Offline';
}
